<template>
  <div v-loading="dataLoading" class="container flex flex_column">
    <!--    顶部导航条-->
    <div class="topNav flex flex_between">
      <div>
        <span
          class="back mr10 pointer"
          @click="Back"
        ><i class="el-icon-arrow-left" /> 返回</span>
        <span class="fw">生产开单</span>
      </div>
      <div class="orderTopBtn flex">
        <!-- <intelligenceButton
          class="mr10"
          :customer-code="productFrom.customerCode"
          :order-no="isDisable?orderForm.baseData.oldOrderNo : orderForm.baseData.orderNo"
          :is-disable="isDisable"
        />
        <materialButton
          class="mr10"
          :customer-code="productFrom.customerCode"
          :order-no="isDisable?orderForm.baseData.oldOrderNo : orderForm.baseData.orderNo"
          :is-disable="isDisable"
        /> -->
        <el-button
          size="small"
          icon="el-icon-edit-outline"
          @click="showColorDrafts"
        >彩稿</el-button>
        <el-button
          v-if="
            typeStatus === 0 ||
              typeStatus === 2 ||
              typeStatus === 4 ||
              typeStatus === 5
          "
          v-loading="orderLoading"
          type="primary"
          size="small"
          :disabled="orderLoading"
          @click="saveOrder"
        >保存</el-button>
        <el-button
          v-if="typeStatus === 3"
          v-loading="orderLoading"
          type="primary"
          size="small"
          :disabled="orderLoading"
          @click="confirmOrder"
        >确认</el-button>
        <el-image-viewer
          v-show="showViewer"
          :initial-index="0"
          :on-close="onClose"
          :url-list="urlList"
        />
        <!-- <el-button
          v-loading="orderLoading"
          type="primary"
          size="small"
          :disabled="orderLoading"
          @click="saveOrder"
        >保存并发布</el-button> -->
      </div>
    </div>
    <div class="mainCenter">
      <el-form
        ref="orderForm"
        label-position="left"
        :model="productFrom"
        :rules="rules"
        label-width="110px"
        class="orderForm flex flex_between"
      >
        <div class="leftCon">
          <div class="formBox">
            <div class="order flex flex_between">
              <!-- <el-row :gutter="10">
                <el-col :span="6">
                  <span>订单编号</span>
                </el-col>
                <el-col :span="12">
                  <el-input
                    v-model="productFrom.orderNo"
                    class=""
                    size="mini"
                    width="auto"
                    disabled
                  />
                </el-col>
                <el-col :span="6">
                  <el-button
                    type="primary"
                    size="mini"
                    icon="el-icon-search"
                    @click="showOrder = true"
                  >查找</el-button>
                  <SelectOrderList :per-visible.sync="showOrder" @current="selectCurrentRow" />
                </el-col>
              </el-row> -->
            </div>
            <div class="cTitle">
              <h3>订单信息</h3>
            </div>
            <div class="formItem">
              <el-form-item label="订单单号">
                {{ productFrom.orderBaseData.xieYiShuHao }}
              </el-form-item>
              <el-form-item label="产品名称">
                {{ productFrom.orderBaseData.orderProductName }}
              </el-form-item>
              <el-form-item label="印刷版本">
                {{ productFrom.orderBaseData.productVersions }}
              </el-form-item>
              <el-form-item label="印刷板面">
                {{ productFrom.orderBaseData.printingSurface }}
              </el-form-item>
              <el-form-item label="标签套数">
                {{ productFrom.orderBaseData.taoZhuangQuantity }}
              </el-form-item>
              <el-form-item label="标签枚数">
                {{ productFrom.orderBaseData.tagSumQuantity }}
              </el-form-item>
              <el-form-item label="数据数量">
                {{ productFrom.orderBaseData.tagDataQuantity }}
              </el-form-item>
            </div>
            <div class="cTitle mt5">
              <h3>套装关系</h3>
            </div>
            <div class="formItem">
              <labelTree :tree-data="productFrom.packageRelations" />
            </div>
            <div class="cTitle mt10">
              <h3>产品包装</h3>
            </div>
            <div class="formItem">
              <el-form-item label="成品样式">
                <el-select
                        filterable
                  v-model="productFrom.packageData.productStyle"
                  placeholder="请选择成品样式"
                  clearable
                  size="mini"
                  :disabled="isDisable"
                >
                  <el-option label="卷式" :value="2" />
                  <el-option label="平张" :value="1" />
                  <el-option label="折页" :value="3" />
                </el-select>
              </el-form-item>

              <el-form-item
                v-if="productFrom.packageData.productStyle !== 1"
                label="出标方向"
              >
                <el-select
                        filterable
                  v-model="productFrom.packageData.outDirection"
                  placeholder="请选择成品样式"
                  size="mini"
                  filterable
                  :disabled="isDisable"
                >
                  <el-option label="上" :value="1" />
                  <el-option label="下" :value="2" />
                  <el-option label="左" :value="3" />
                  <el-option label="右" :value="4" />
                </el-select>
              </el-form-item>

              <el-form-item
                v-if="productFrom.packageData.productStyle === 2"
                label="卷向"
              >
                <el-select
                        filterable
                  v-model="productFrom.packageData.scrollDirection"
                  placeholder="请选择成品样式"
                  size="mini"
                  filterable
                  :disabled="isDisable"
                >
                  <el-option label="页面朝内" :value="1" />
                  <el-option label="页面朝外" :value="2" />
                </el-select>
              </el-form-item>

              <el-form-item label="贴标方式">
                <el-select
                        filterable
                  v-model="productFrom.packageData.tagAffixWay"
                  placeholder="请选择成品样式"
                  clearable
                  size="mini"
                  filterable
                  :disabled="isDisable"
                >
                  <el-option
                    label="自动帖"
                    :value="1"
                    :disabled="productFrom.packageData.productStyle === 1"
                  />
                  <el-option label="手帖" :value="2" />
                </el-select>
              </el-form-item>

              <el-form-item
                v-if="productFrom.packageData.productStyle === 2"
                label="卷芯大小"
              >
                <el-input
                  v-model="productFrom.packageData.mandrelSize"
                  placeholder="请输入内容"
                  size="mini"
                  :disabled="isDisable"
                >
                  <template slot="append">mm</template>
                </el-input>
              </el-form-item>
              <el-form-item
                v-if="productFrom.packageData.productStyle === 2"
                label="外直径不超过"
              >
                <el-input
                  v-model="productFrom.packageData.notOverDiameter"
                  placeholder="请输入内容"
                  size="mini"
                  :disabled="isDisable"
                >
                  <template slot="append">mm</template>
                </el-input>
              </el-form-item>

              <el-form-item
                v-if="productFrom.packageData.productStyle === 2"
                label="每卷等于"
              >
                <el-input
                  v-model="productFrom.packageData.pageEqualTags"
                  placeholder="请输入内容"
                  size="mini"
                  :disabled="isDisable"
                  @blur="getBoxEqualTags"
                >
                  <template slot="append">{{
                    productFrom.orderBaseData.productUnion || "枚"
                  }}</template>
                </el-input>
              </el-form-item>

              <el-form-item
                v-if="productFrom.packageData.productStyle !== 2"
                label="每张等于"
              >
                <el-input
                  v-model="productFrom.packageData.pageEqualTags"
                  placeholder="请输入内容"
                  size="mini"
                  :disabled="isDisable"
                  @blur="getBoxEqualTags"
                >
                  <template slot="append">{{
                    productFrom.orderBaseData.productUnion || "枚"
                  }}</template>
                </el-input>
              </el-form-item>
              <el-form-item
                v-if="productFrom.packageData.productStyle !== 2"
                label="每包等于"
              >
                <el-input
                  v-model="productFrom.packageData.packageEqualPages"
                  placeholder="请输入内容"
                  size="mini"
                  :disabled="isDisable"
                  @blur="getBoxEqualTags"
                >
                  <template slot="append">张</template>
                </el-input>
              </el-form-item>
              <el-form-item label="每箱等于">
                <el-input
                  v-model="productFrom.packageData.boxEqualPackages"
                  placeholder="请输入内容"
                  size="mini"
                  :disabled="isDisable"
                  @blur="getBoxEqualTags"
                >
                  <template slot="append">{{
                    productFrom.packageData.productStyle !== 2 ? "包" : "卷"
                  }}</template>
                </el-input>
              </el-form-item>
              <el-form-item label="每箱共计">
                <el-input
                  v-model="productFrom.packageData.boxEqualTags"
                  placeholder="请输入内容"
                  size="mini"
                  :disabled="isDisable"
                >
                  <template slot="append">{{
                    productFrom.orderBaseData.productUnion || "枚"
                  }}</template>
                </el-input>
              </el-form-item>
            </div>
          </div>
        </div>
        <div class="cenCon">
          <div class="tagsBox flex_between">
            <div class="orderContent flexs">
              <div class="tagCon">
                <template v-for="item in productFrom.orderTagDataList">
                  <div :key="item.productTagCode" class="tagList">
                    <div class="listNav flex">
                      <span class="pointer" @click="shrink(item)">
                        <i v-if="!item.isShow" class="el-icon-arrow-down" />
                        <i v-else class="el-icon-arrow-up" />
                      </span>
                      <span class="f16 ml15">{{ item.productTagName }}</span>
                    </div>
                    <div v-if="!item.isShow" class="tagShow">
                      <div class="tagBaseList">
                        <ul class="flex flex_wrap">
                          <li class="flex">
                            <span class="titles C_999aaa">标签尺寸</span>
                            <span>{{
                              item.tagWidth + "*" + item.tagHeight
                            }}mm</span>
                          </li>
                          <li class="flex">
                            <span class="titles C_999aaa">标签形状</span>
                            <span>{{ item.tagShapeName || "暂无" }}</span>
                          </li>
                          <li class="flex">
                            <span class="titles C_999aaa">标签R角</span>
                            <span>{{
                              item.tagBorderRadius + "mm" || "暂无"
                            }}</span>
                          </li>
                          <li class="flex">
                            <span class="titles C_999aaa">标签边空</span>
                            <span>{{ item.tagBorder + "mm" || "暂无" }}</span>
                          </li>
                          <li class="flex">
                            <span class="titles C_999aaa">被贴物</span>
                            <span>{{ item.postedContent || "暂无" }}</span>
                          </li>
                          <li class="flex">
                            <span class="titles C_999aaa">数据数量</span>
                            <span>{{ item.tagDataQuantity || "暂无" }}</span>
                          </li>
                          <li class="flex">
                            <span class="titles C_999aaa">套装枚数</span>
                            <span>{{ item.matchQuantity || "暂无" }}</span>
                          </li>
                          <li class="flex">
                            <span class="titles C_999aaa">标签类型</span>
                            <span>{{ item.tagTypeName || "暂无" }}</span>
                          </li>
                        </ul>
                      </div>
                      <!-- 印刷层 -->
                      <div class="cTitle">
                        <h3>印刷层</h3>
                      </div>
                      <div class="layerTable">
                        <div class="border lastTdNoBorder">
                          <el-table
                            :data="item.layerDataList"
                            border
                            fit
                            style="width: 100%"
                          >
                            <el-table-column
                              prop="printingLayerName"
                              label="层名称"
                              min-width="100"
                            />
                            <el-table-column
                              prop="printingMaterialName"
                              label="材料"
                              width="100"
                            />
                            <el-table-column
                              prop="baseFilmColorName"
                              label="底膜颜色"
                              width="100"
                            >
                              <template scope="{row}">
                                {{ row.baseFilmColorName || "--" }}
                              </template>
                            </el-table-column>
                            <el-table-column
                              prop="technoPlaces"
                              label="数码位数"
                              width="100"
                            >
                              <template scope="{row}">
                                {{ row.technoPlaces || "--" }}
                              </template>
                            </el-table-column>
                            <el-table-column
                              prop="barCodePlaces"
                              label="条码位数"
                              width="100"
                            >
                              <template scope="{row}">
                                {{ row.barCodePlaces || "--" }}
                              </template>
                            </el-table-column>
                            <el-table-column
                              prop="liuJiaoTextureName"
                              label="留胶材质"
                              width="100"
                            >
                              <template scope="{row}">
                                {{ row.liuJiaoTextureName || "--" }}
                              </template>
                            </el-table-column>
                            <el-table-column
                              prop="printingMaterialName"
                              label="表面要求"
                              width="100"
                            >
                              <template scope="{row}">
                                <span
                                  v-for="m in row.surfaceRequireNameList"
                                  :key="m"
                                >{{ m }}</span>
                              </template>
                            </el-table-column>
                            <el-table-column
                              prop="scrapingCoatingColorName"
                              label="刮开图层颜色"
                              width="110"
                            >
                              <template scope="{row}">
                                {{ row.scrapingCoatingColorName || "--" }}
                              </template>
                            </el-table-column>
                            <el-table-column
                              prop="scrapingWordColorName"
                              label="刮开文字颜色"
                              width="110"
                            >
                              <template scope="{row}">
                                {{ row.scrapingWordColorName || "--" }}
                              </template>
                            </el-table-column>
                          </el-table>
                        </div>
                      </div>
                      <!-- 印刷颜色 -->
                      <div class="cTitle">
                        <h3>印刷颜色</h3>
                      </div>
                      <div class="layerTable">
                        <div class="border lastTdNoBorder">
                          <el-table
                            :data="item.colorDataList"
                            border
                            fit
                            style="width: 100%"
                          >
                            <el-table-column
                              prop="colorName"
                              label="印刷色"
                              width="100"
                            >
                              <template scope="{row}">
                                {{ row.colorName || "--" }}
                              </template>
                            </el-table-column>
                            <el-table-column
                              prop="colorReferenceName"
                              label="参考"
                              width="100"
                            >
                              <template scope="{row}">
                                {{ row.colorReferenceName || "--" }}
                              </template>
                            </el-table-column>
                            <el-table-column
                              prop="baseFilmColorName"
                              label="所属层"
                              min-width="100"
                            >
                              <template scope="{row}">
                                <span
                                  v-for="m in row.printingLayerNameList"
                                  :key="m"
                                >{{ m }}</span>
                              </template>
                            </el-table-column>
                            <el-table-column
                              prop="colorRemark"
                              label="参考"
                              width="auto"
                            >
                              <template scope="{row}">
                                {{ row.colorRemark || "--" }}
                              </template>
                            </el-table-column>
                          </el-table>
                        </div>
                      </div>
                    </div>
                  </div>
                </template>
              </div>
            </div>
            <!--   拼版信息  生产物料 生产工艺-->
            <div class="tagsRgBox">
              <div class="tabBox">
                <ul class="flex">
                  <li
                    :class="tabsIndex === 0 ? 'on' : ''"
                    @click="tabChange(0)"
                  >
                    拼版信息
                  </li>
                  <li
                    :class="tabsIndex === 2 ? 'on' : ''"
                    @click="tabChange(2)"
                  >
                    生产工艺
                  </li>
                  <li
                    :class="tabsIndex === 1 ? 'on' : ''"
                    @click="tabChange(1)"
                  >
                    生产物料
                  </li>
                </ul>
              </div>
              <div class="tabCon">
                <!-- 拼版信息   -->
                <div v-if="tabsIndex === 0">
                  <div class="formItem mt5">
                    <el-form-item label="版辊尺寸">
                      <el-input
                        v-model="productFrom.baseData.makeup_RollSize"
                        placeholder="请输入长度"
                        size="mini"
                        :disabled="isDisable"
                      >
                        <template slot="append">mm</template>
                      </el-input>
                    </el-form-item>
                    <el-form-item label="数码板面">
                      <el-input
                        v-model="productFrom.baseData.makeup_DigitalEdition"
                        placeholder="请输入长度"
                        size="mini"
                        :disabled="isDisable"
                      >
                        <template slot="append">mm</template>
                      </el-input>
                    </el-form-item>
                    <el-form-item label="跳距">
                      <el-input
                        v-model="productFrom.baseData.makeup_SkipDistance"
                        placeholder="请输入长度"
                        size="mini"
                        :disabled="isDisable"
                      >
                        <template slot="append">mm</template>
                      </el-input>
                    </el-form-item>
                    <el-form-item label="间距">
                      <el-input
                        v-model="productFrom.baseData.makeup_SpaceBetween"
                        placeholder="请输入长度"
                        size="mini"
                        :disabled="isDisable"
                      >
                        <template slot="append">mm</template>
                      </el-input>
                    </el-form-item>
                    <el-form-item label="拼版">
                      <el-input
                        v-model="productFrom.baseData.makeup_Combine"
                        placeholder="请输入内容"
                        size="mini"
                        :disabled="isDisable"
                      />
                    </el-form-item>
                    <el-form-item label="模数">
                      <el-input
                        v-model="productFrom.baseData.makeup_Modules"
                        placeholder="请输入内容"
                        size="mini"
                        :disabled="isDisable"
                      />
                    </el-form-item>
                    <el-form-item label="平张断张">
                      <el-input
                        v-model="productFrom.baseData.makeup_PzDz"
                        placeholder="请输入内容"
                        size="mini"
                        :disabled="isDisable"
                      />
                    </el-form-item>
                    <el-form-item label="色数">
                      <el-input
                        v-model="productFrom.baseData.makeup_Colors"
                        placeholder="请输入内容"
                        size="mini"
                        :disabled="isDisable"
                      />
                    </el-form-item>
                    <el-form-item label="生产备注">
                      <el-input
                        v-model="productFrom.baseData.produceRemark"
                        type="textarea"
                        :autosize="{ minRows: 10 }"
                        placeholder="请输入内容"
                        size="mini"
                        :disabled="isDisable"
                      />
                    </el-form-item>
                  </div>
                </div>
                <!-- 生产物料  -->
                <div v-show="tabsIndex === 1">
                  <ul>
                    <template
                      v-for="(cl, index) in productFrom.produceMaterialList"
                    >
                      <li :key="index" class="drgCard pointer">
                        <div class="flex flex_between">
                          <div class="cTitle">
                            <h3>{{ cl.goodsName }}</h3>
                          </div>
                          <div class="mb15">
                            <span
                              v-if="
                                typeStatus === 0 ||
                                  typeStatus === 2 ||
                                  typeStatus === 4 ||
                                  typeStatus === 5
                              "
                              class="pointer mr5"
                              @click="matairDelete(index)"
                            ><i
                              class="el-icon-delete"
                            /></span>
                          </div>
                        </div>
                        <div class="colorCon formItem">
                          <el-form-item label="物料编号:" class="min_item">
                            {{ cl.stockGoodsCode }}
                          </el-form-item>
                          <el-form-item label="物料类型:" class="min_item">
                            {{ cl.categoryName }}
                          </el-form-item>
                          <el-form-item label="规格型号:" class="min_item">
                            {{ cl.stockGoodsName }}
                          </el-form-item>
                          <el-form-item label="领料设备:">
                            <el-select
                        filterable
                              v-model="cl.craftTaskClientNo"
                              placeholder="请选择工艺"
                              clearable
                              filterable
                              size="mini"
                              :disabled="isDisable"
                              @change="changDviesAndCraf"
                            >
                              <el-option
                                v-for="(op,index) in selectArr"
                                :key="index"
                                :label="op.name"
                                :value="op.craftTaskClientNo"
                              />
                            </el-select>
                          </el-form-item>
                          <el-form-item label="计划用料:">
                            <el-input
                              v-model="cl.planMaterialQuantity"
                              placeholder="请输入内容"
                              size="mini"
                              :disabled="isDisable"
                            />
                          </el-form-item>
                          <el-form-item label="物料备注:">
                            <el-input
                              v-model="cl.produceMaterialRemark"
                              placeholder="请输入内容"
                              size="mini"
                              :disabled="isDisable"
                            />
                          </el-form-item>
                        </div>
                      </li>
                    </template>
                  </ul>
                  <!--   选择物料  -->
                  <div
                    v-if="
                      typeStatus === 0 ||
                        typeStatus === 2 ||
                        typeStatus === 4 ||
                        typeStatus === 5
                    "
                    class="newLayeeCon"
                  >
                    <el-button
                      type="primary"
                      icon="el-icon-plus"
                      class="mr5"
                      size="small"
                      @click="showMateria = true"
                    >选择材料</el-button>
                    <SelectMateriaList
                      ref="materiaList"
                      :per-visible.sync="showMateria"
                      @getMateriListData="refuseListsMateriAll"
                    />
                  </div>
                </div>
                <!-- 生产工艺  -->
                <div v-show="tabsIndex === 2">
                  <ul id="dragList" class="dragList">
                    <template
                      v-for="(cl, index) in productFrom.produceCraftList"
                    >
                      <li :key="index" class="drgCard pointer">
                        <div class="flex flex_between">
                          <div class="cTitle">
                            <h3>{{ cl.produceCraft.produceCraftName }}</h3>
                          </div>
                          <div
                            v-if="
                              typeStatus === 0 ||
                                typeStatus === 2 ||
                                typeStatus === 4 ||
                                typeStatus === 5
                            "
                            class="mb15"
                          >
                            <span
                              class="pointer mr5"
                              @click="craftDelete(cl, index)"
                            ><i
                              class="el-icon-delete"
                            /></span>
                            <i class="iconfont extend mr5" />
                          </div>
                        </div>
                        <div class="colorCon formItem">
                          <el-form-item label="设备名称:">
                            <el-select
                        filterable
                              v-model="cl.produceCraft.produceEquipment"
                              placeholder="请选择设备"
                              clearable
                              filterable
                              size="mini"
                              :disabled="isDisable"
                              @change="changDviesAndCraf"
                            >
                              <el-option
                                v-for="op in cl.craftEquipments"
                                :key="op.equipmentCode"
                                :label="op.equipmentName"
                                :value="op.equipmentCode"
                              />
                            </el-select>
                          </el-form-item>

                          <el-form-item label="计划工时:">
                            <el-input
                              v-model="cl.produceCraft.craftTaskPlanUseTime"
                              placeholder="请输入内容"
                              size="mini"
                              :disabled="isDisable"
                            >
                              <template slot="append">分钟</template>
                            </el-input>
                          </el-form-item>
                          <el-form-item label="生产备注:">
                            <el-input
                              v-model="cl.produceCraft.craftTaskRemark"
                              placeholder="请输入内容"
                              size="mini"
                              :disabled="isDisable"
                            />
                          </el-form-item>
                        </div>
                      </li>
                    </template>
                  </ul>

                  <!--   生产工艺on -->
                  <div
                    v-if="
                      typeStatus === 0 ||
                        typeStatus === 2 ||
                        typeStatus === 4 ||
                        typeStatus === 5
                    "
                    class="newLayeeCon"
                  >
                    <el-button
                      type="primary"
                      icon="el-icon-plus"
                      class="mr5"
                      size="small"
                      @click="showCraft = true"
                    >选择工艺</el-button>
                    <SelectCraftlist
                      ref="selectCrafList"
                      :per-visible.sync="showCraft"
                      @refuseLists="refuseListsAll"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script>
import SelectCraftlist from '@/components/selectCraft'
import SelectMateriaList from '@/components/selectMaterial'
import labelTree from '@/components/labelTree'
import { mapGetters } from 'vuex'
import { uuid } from 'vue-uuid'
import Sortable from 'sortablejs'
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
  name: '',
  components: { labelTree, SelectCraftlist, SelectMateriaList, ElImageViewer },
  computed: {
    ...mapGetters(['userInfo'])
  },
  data() {
    return {
      orderInfos: {
        productData: {
          tagDataList: [{}, {}, {}]
        }
      },
      selectArr: [],
      urlList: [], // 图片列表
      showViewer: false, // 预览图片
      showOrder: false, // 订单弹窗
      showCraft: false, // 选择工艺
      showMateria: false, // 选择物料
      orderNo: '', // 订单号
      loading: null,
      tabsIndex: 0, // 右侧tabs切换索引
      tagIndex: 0, // 当前标签索引
      colorOps: 'add', // 印刷颜色当前操作
      colorEditIndex: null, // 印刷颜色修改的索引
      dataLoading: false, // 订单详情数据加载
      orderLoading: false, // 订单保存加载效果
      isAddColor: false, // 印刷颜色新增弹框是否打开

      // 设置时间控件小于当前日期不能选择
      option: {
        disabledDate: (time) => {
          return time.getTime() < Date.now() - 1 * 24 * 3600 * 1000
        }
      },
      productFrom: {
        baseData: {},
        packageData: {},
        orderBaseData: {}
      },
      isDisable: false, // 是否禁用输入框
      typeStatus: 0,
      rules: {
        'productBase.customerName': [
          { required: true, message: '请选择客户', trigger: 'change' }
        ],
        'productBase.productName': [
          {
            required: true,
            message: '请输入产品名称',
            trigger: ['change', 'blur']
          }
        ]
      }
    }
  },
  created() {
    this.getTypeStatus()
    this.loading = this.$loading({
      lock: true,
      text: '数据加载中',
      spinner: 'el-icon-loading',
      fullscreen: true,
      background: 'rgba(0, 0, 0, 0.7)'
    })
  },
  deactivated() {
    // localStorage.removeItem('orderInit')
  },
  beforeDestroy() {
    // localStorage.removeItem('orderInit')
  },
  mounted() {
    this.setSort()
  },
  methods: {
    getTypeStatus() {
      this.typeStatus = Number(this.$route.query.typeStatus)
      if (Number(this.$route.query.typeStatus) === 0) {
        this.getOrderDetail()
      } else if (Number(this.$route.query.typeStatus) === 1) {
        this.isDisable = true
        this.getTaskBillDetail()
      } else if (Number(this.$route.query.typeStatus) === 2) {
        this.getTaskBillDetail()
      } else if (Number(this.$route.query.typeStatus) === 3) {
        this.isDisable = true
        this.getTaskBillDetail()
      } else if (Number(this.$route.query.typeStatus) === 4) {
        this.getCreateProduceTaskBill()
      } else if (Number(this.$route.query.typeStatus) === 5) {
        this.getCopyOrderDetail()
      }
    },
    // 右侧tab切换
    tabChange(index) {
      if (index === 1) {
        if (
          this.productFrom.produceCraftList.length <= 0 &&
          this.isDisable !== true
        ) {
          this.$message({
            type: 'error',
            message: '请先选择生产工艺!'
          })
          return
        } else {
          // this.productFrom.produceMaterialList.forEach(e => {
          //   e.craftTaskClientNo = ''
          // })
        }
      }
      this.fillSelect()
      this.tabsIndex = index
    },
    //
    changDviesAndCraf() {
      // this.fillSelect()
    },
    getName(arr, code) {
      let name = ''
      arr.forEach((e) => {
        if (e.equipmentCode === code) {
          name = e.equipmentName
        }
      })
      return name
    },
    fillSelect() {
      const _selectArr = []
      for (
        let index = 0;
        index < this.productFrom.produceCraftList.length;
        index++
      ) {
        const _a = {}
        _a.craftTaskClientNo = this.productFrom.produceCraftList[index].produceCraft.craftTaskClientNo
        _a.name =
          this.productFrom.produceCraftList[index].produceCraft
            .produceCraftName +
          '/' +
          this.getName(
            this.productFrom.produceCraftList[index].craftEquipments,
            this.productFrom.produceCraftList[index].produceCraft
              .produceEquipment
          )
        // this.productFrom.produceCraftList[
        //   index
        // ].produceCraft.craftTaskClientNo = _a.craftTaskClientNo
        _selectArr.push(_a)
      }
      this.selectArr = _selectArr
    },
    // 获取订单详情
    getOrderDetail() {
      const parmas = {
        saleOrderNo: this.$route.query.orderNo
      }
      this.$api.product
        .AutoCreateProduceTaskBill(parmas)
        .then((res) => {
          this.productFrom = res
          this.loading.close()
        })
        .catch(() => {
          this.loading.close()
        })
    },
    // 根据老生产单复制创建新的生产任务单
    getCreateProduceTaskBill() {
      const parmas = {
        produceTaskBillNo: this.$route.query.produceTaskBillNo
      }
      this.$api.product
        .CopyCreateProduceTaskBill(parmas)
        .then((res) => {
          this.productFrom = res
          this.loading.close()
        })
        .catch(() => {
          this.loading.close()
        })
    },
    // 生产任务单明细数据
    getTaskBillDetail() {
      const parmas = {
        produceTaskBillNo: this.$route.query.produceTaskBillNo,
        produceTaskID: this.$route.query.produceTaskID
      }
      this.$api.product
        .GetProduceTaskBillDetail(parmas)
        .then((res) => {
          this.productFrom = res
          res.produceCraftList.forEach(n => {
            n.produceCraft.craftTaskClientNo = n.produceCraft.craftTaskClientNo ? n.produceCraft.craftTaskClientNo : uuid.v4()
          })
          res.produceMaterialList.forEach(e => {
            res.produceCraftList.forEach(n => {
              if (n.produceCraft.craftTaskNo === e.craftTaskNo) {
                n.produceCraft.craftTaskClientNo = e.craftTaskClientNo
                this.selectArr.push({
                  name: n.produceCraft.produceCraftName + '/' + this.getName(n.craftEquipments, n.produceCraft.produceEquipment),
                  craftTaskClientNo: e.craftTaskClientNo
                })
              }
            })
          })
          this.loading.close()
        })
        .catch(() => {
          this.loading.close()
        })
    },
    // 复制
    getCopyOrderDetail() {
      const parmas = {
        saleOrderNo: this.$route.query.saleOrderNo
      }
      const parmast = {
        produceTaskBillNo: this.$route.query.produceTaskBillNo,
        produceTaskID: this.$route.query.produceTaskID
      }
      this.$api.product
        .AutoCreateProduceTaskBill(parmas)
        .then((copy) => {
          this.$api.product
            .GetProduceTaskBillDetail(parmast)
            .then((info) => {
              info.baseData.produceTaskID = copy.baseData.produceTaskID
              info.produceCraftList.forEach(n => {
                n.produceCraft.craftTaskClientNo = n.produceCraft.craftTaskClientNo ? n.produceCraft.craftTaskClientNo : uuid.v4()
              })
              info.produceMaterialList.forEach(e => {
                info.produceCraftList.forEach(n => {
                  if (n.produceCraft.craftTaskNo === e.craftTaskNo) {
                    n.produceCraft.craftTaskClientNo = e.craftTaskClientNo
                    this.selectArr.push({
                      name: n.produceCraft.produceCraftName + '/' + this.getName(n.craftEquipments, n.produceCraft.produceEquipment),
                      craftTaskClientNo: e.craftTaskClientNo
                    })
                  }
                })
              })
              this.productFrom = info
              this.loading.close()
            })
            .catch(() => {
              this.loading.close()
            })
        })
        .catch(() => {
          this.loading.close()
        })
    },
    onClose() {
      this.showViewer = false
    },
    showColorDrafts() {
      const parmas = {
        orderNo: this.productFrom.orderBaseData.orderNo
      }
      this.$api.product
        .QueryOrdersColorDrafts(parmas)
        .then((res) => {
          if (res.fileDataList && res.fileDataList.length) {
            const ur = []
            res.fileDataList.forEach((e) => {
              ur.push(e.draftFilePreviewUrl)
            })
            this.$nextTick(() => {
              this.urlList = ur
              this.showViewer = true
            })
          } else {
            this.$message({
              type: 'error',
              message: '暂无彩稿'
            })
          }
        })
        .catch(() => {})
    },
    // 选择订单
    selectCurrentRow() {},
    // 确认订单
    confirmOrder() {
      const parmas = {
        produceTaskID: this.productFrom.baseData.produceTaskID
      }
      this.$api.product
        .SureProduceTaskBill(parmas)
        .then((res) => {
          this.$router.go(-1)
        })
        .catch(() => {})
    },
    // 选择工艺
    refuseListsAll(val) {
      const parmas = {
        craftCodes: []
      }
      val.forEach((i) => {
        parmas.craftCodes.push(i.code)
      })
      this.$api.product
        .SureChooseProduceCraftEquipmentMaps(parmas)
        .then((res) => {
          const _data = []
          res.forEach((e) => {
            const _ar = {
              produceCraft: {},
              craftEquipments: []
            }
            _ar.produceCraft.produceCraftName = e.craftName
            _ar.produceCraft.produceCraftNo = e.craftCode
            _ar.produceCraft.craftTaskClientNo = uuid.v4()
            _ar.produceCraft.craftTaskPlanUseTime = 0
            _ar.produceCraft.craftTaskRemark = ''
            _ar.craftEquipments = e.craftEquipments
            _ar.produceCraft.produceEquipment =
              e.craftEquipments[0].equipmentCode
            _ar.produceCraft.produceEquipmentName =
              e.craftEquipments[0].equipmentName
            _data.push(_ar)
          })
          _data.forEach((e) => {
            this.productFrom.produceCraftList.push(e)
          })
        })
        .catch(() => {})
    },
    // 选择物料
    refuseListsMateriAll(val) {
      const _data = []

      val.forEach((e) => {
        const _ar = {
          goodsName: '',
          stockGoodsCode: '',
          stockGoodsName: '',
          specificationName: '',
          categoryName: '',
          planMaterialQuantity: 0,
          produceMaterialRemark: ''
        }
        _ar.stockGoodsCode = e.stockGoodsCode
        _ar.stockGoodsName = e.stockGoodsName
        _ar.goodsName = e.goodsName
        _ar.specificationName = e.specificationName
        _ar.categoryName = e.categoryName
        _data.push(_ar)
      })
      _data.forEach((e) => {
        this.productFrom.produceMaterialList.push(e)
      })
    },
    // 删除工艺
    craftDelete(cl, index) {
      this.$confirm('是否删除该工艺?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const _status = this.productFrom.produceMaterialList.some(item => item.craftTaskClientNo === cl.produceCraft.craftTaskClientNo)
        if (_status) {
          this.$message({
            type: 'error',
            message: '有引用的生产物料，请先删除!'
          })
          return
        } else {
          this.productFrom.produceCraftList.splice(index, 1)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }
      })
    },
    // 删除物料
    matairDelete(index) {
      this.$confirm('是否删除该物料?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.productFrom.produceMaterialList.splice(index, 1)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      })
    },
    setSort() {
      const el = document.getElementById('dragList')
      Sortable.create(el, {
        ghostClass: 'sortable-ghost', // 放置占位符的类名
        onUpdate: (evt) => {
          const targetRow = this.productFrom.produceCraftList.splice(
            evt.oldIndex,
            1
          )[0]
          this.productFrom.produceCraftList.splice(evt.newIndex, 0, targetRow)
          const newArray = this.productFrom.produceCraftList.slice(0)
          this.productFrom.produceCraftList = []
          newArray.forEach((m, x) => {
            m.produceCraft.produceCraftSort = x
          })
          this.$nextTick(() => {
            this.productFrom.produceCraftList = newArray
          })
        }
      })
    },

    // 开单保存
    saveOrder() {
      const _data = {}
      const productTagCodes = []
      const produceMaterials = []
      const produceCrafts = []
      const {
        outDirectionName,
        productStyleName,
        scrollDirectionName,
        tagAffixWayName,
        ..._producePackage
      } = this.productFrom.packageData
      _producePackage.saleOrderNo = this.productFrom.orderBaseData.orderNo
      this.productFrom.orderTagDataList.forEach((e) => {
        productTagCodes.push(e.productTagCode)
      })
      this.productFrom.produceMaterialList.forEach((e) => {
        const _mater = {
          stockGoodsCode: '',
          planUseQuantity: 0,
          materialRemark: ''
        }
        _mater.stockGoodsCode = e.stockGoodsCode
        _mater.planUseQuantity = Number(e.planMaterialQuantity)
        _mater.materialRemark = e.produceMaterialRemark
        _mater.craftTaskClientNo = e.craftTaskClientNo || ''
        produceMaterials.push(_mater)
      })
      this.productFrom.produceCraftList.forEach((e) => {
        // eslint-disable-next-line no-unused-vars
        const { produceCraftName, ...carft } = e.produceCraft
        produceCrafts.push(carft)
      })
      _data.produceTaskID = this.productFrom.baseData.produceTaskID
      _data.makeup_RollSize = Number(this.productFrom.baseData.makeup_RollSize)
      _data.makeup_DigitalEdition = Number(
        this.productFrom.baseData.makeup_DigitalEdition
      )
      _data.makeup_SkipDistance = Number(
        this.productFrom.baseData.makeup_SkipDistance
      )
      _data.makeup_SpaceBetween = Number(
        this.productFrom.baseData.makeup_SpaceBetween
      )
      _data.makeup_Combine = this.productFrom.baseData.makeup_Combine
      _data.makeup_Modules = this.productFrom.baseData.makeup_Modules
      _data.makeup_PzDz = this.productFrom.baseData.makeup_PzDz
      _data.makeup_Colors = this.productFrom.baseData.makeup_Colors
      _data.produceRemark = this.productFrom.baseData.produceRemark
      _data.producePackage = _producePackage
      _data.productTagCodes = productTagCodes
      _data.produceMaterials = produceMaterials
      _data.produceCrafts = produceCrafts

      for (let index = 0; index < produceCrafts.length; index++) {
        if (produceCrafts[index].produceEquipment === '') {
          this.$message({
            type: 'error',
            message: '请选择生产工艺下的设备名称!'
          })
          return
        }
      }
      for (let index = 0; index < produceCrafts.length; index++) {
        if (produceCrafts[index].craftTaskPlanUseTime === '') {
          this.$message({
            type: 'error',
            message: '请输入计划工时!'
          })
          return
        }
      }
      for (let index = 0; index < produceMaterials.length; index++) {
        if (produceMaterials[index].craftTaskClientNo === '') {
          this.$message({
            type: 'error',
            message: '请选择生产物料下的生产工艺!'
          })
          return
        }
      }
      for (let index = 0; index < produceMaterials.length; index++) {
        if (produceMaterials[index].planUseQuantity === '') {
          this.$message({
            type: 'error',
            message: '请输入计划用料!'
          })
          return
        }
      }
      this.$api.product
        .ExcuteUpdateProduceTaskBill(_data)
        .then((res) => {
          this.$router.go(-1)
        })
        .catch(() => {})
    },
    // 控制标签内容层显示隐藏
    shrink(item) {
      this.$set(item, 'isShow', !item.isShow)
    },
    // 计算产品包装，每箱共计多少枚
    getBoxEqualTags() {
      const pageEqualTagsNum = Number(
        this.productFrom.packageData.pageEqualTags
      )
      const packageEqualPagesNum = Number(
        this.productFrom.packageData.packageEqualPages
      )
      const boxEqualPackagesNum = Number(
        this.productFrom.packageData.boxEqualPackages
      )
      if (this.productFrom.packageData.productStyle !== 2) {
        this.productFrom.packageData.boxEqualTags =
          pageEqualTagsNum * packageEqualPagesNum * boxEqualPackagesNum
      } else {
        this.productFrom.packageData.boxEqualTags =
          pageEqualTagsNum * boxEqualPackagesNum
      }
    },
    // 初始化订单数据
    getInitOrder(oldOrderNo) {},
    // 返回
    Back() {
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="scss" scoped>
.colorList {
  margin-top: 10px;
  li {
    border: 1px solid #eeeeef;
    margin-bottom: 10px;
    .fName {
      position: relative;
      &:before {
        content: "";
        position: absolute;
        left: 0;
        height: 22px;
        border-left: 3px solid #3f61f1;
        top: -1px;
      }
    }
    .colorCon {
      line-height: 22px;
      padding: 16px;
    }
  }
}
.newLayeeCon {
  margin-top: 10px;
  .el-button {
    width: 100%;
  }
}
.tagsBox {
  display: flex;
  flex: 1;
  height: 100%;
  width: 100%;
  .tagsRgBox {
    width: 320px;
    flex-shrink: 0;
    height: 100%;
    border-left: 1px solid #e6e6e6;
    background: #fff;
    overflow: auto;
    .tabBox {
      ul {
        li {
          width: 33.3%;
          text-align: center;
          height: 32px;
          line-height: 32px;
          border-right: 1px solid #e6e6e6;
          background: #f7f8faff;
          border-bottom: 1px solid #e6e6e6;
          cursor: pointer;
          &:last-child {
            border-right: none;
          }
          &.on {
            background: #fff;
            border-bottom: 1px solid #fff;
          }
        }
      }
    }
    .tabCon {
      width: 100%;
      padding: 0 16px;
    }
  }
}



.cenCon {
  flex: 1;
  height: 100%;
  overflow-y: auto;
  width: calc(100% - 350px);
  overflow-x: hidden;

  .tagsNav {
    height: 36px;
    border-bottom: 2px solid #3f61f1;
    background: #fff;
    overflow-y: hidden;

    li {
      padding-top: 5px;
      margin-left: 5px;

      > span {
        background: #fff;
        display: inline-block;
        padding: 0 20px;
        line-height: 32px;
        border-radius: 5px 5px 0 0;
        border: 1px solid #d2d2d2ff;
        cursor: pointer;
      }

      > span.on {
        background: #3f61f1;
        color: #fff;
        border: 1px solid #3f61f1;
      }
    }
  }
}

.formBox {
  padding: 0 16px;
  .order {
    padding: 10px 0;
  }
}


.orderForm {
  height: calc(100% - 10px);
  width: 100%;
}

.mainCenter {
  height: calc(100% - 52px);
  width: 100%;
  overflow-x: hidden;
}

.container {
  height: 100%;
  width: 100%;
}



.tagCon {
  width: 100%;
  flex: 1;
  overflow-x: hidden;
  margin: 0 0 0 10px;
  padding-top: 10px;
  padding-right: 10px;
  .tagList {
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.05);
    border: 1px solid #e6e6e6;
    margin-bottom: 16px;

    .listNav {
      height: 44px;
      padding: 0 14px;
      background: #f5f6f9;
      border-bottom: 1px solid #e6e6e6;
    }

    .tagShow {
      background-color: #ffffff;
      padding: 0 16px;
      .tagBaseList {
        padding: 14px;
        padding-bottom: 8px;
        li {
          line-height: 24px;
          width: 25%;
        }

        .titles {
          width: 100px;
        }
      }
      .layerTable {
        padding: 16px;
        padding-top: 0;
        .border {
          border: solid #ebeef5;
          border-width: 0 1px 0 1px;
        }
      }
    }
  }
}

.orderRemark {
  line-height: 24px;
  padding-bottom: 16px;
}

.orderContent {
  flex: 1;
}
.drgCard {
  background: #ffffff;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  border: 1px solid #eeeeee;
  padding: 12px 16px;
  margin: 10px 0;
}

::v-deep .formItem {
  .el-form-item {
    margin-bottom: 0;
    color: #999aaa;
  }
  .min_item .el-form-item__label {
    line-height: 28px;
    color: #999aaa;
  }
  .min_item .el-form-item__content {
    line-height: 28px;
  }
  .el-form-item__label {
    line-height: 37px;
    color: #999aaa;
  }

  .el-form-item__content {
    line-height: 37px;

    .el-input-group {
      vertical-align: initial;
    }
  }

  .el-select,
  .el-date-editor.el-input {
    width: 100%;
  }

  .el-textarea {
    vertical-align: middle;
  }
}
</style>
<style lang="scss">
.el-loading-mask {
  top: 0;
}
</style>
